<template>
  <Form ref="validForm" :model="drawer" :rules="ruleValidate">
    <FormItem label="父级组织机构名称" label-position="top" v-if="drawer.pid != null">
      <Input placeholder="父级组织机构名称" :modelValue="drawer.parentName" readonly/>
    </FormItem>

    <FormItem label="组织机构名称" label-position="top" prop="name" :error="error.name">
      <Input v-model="drawer.name" placeholder="请输入组织机构名称"/>
    </FormItem>

    <FormItem label="组织机构编号" label-position="top" prop="code" :error="error.code">
      <Input v-model="drawer.code" v-if="drawer.pid == null" :readonly="drawer.id != null"
             placeholder="请输入机构编号(四位数字),例如 `1000`"/>

      <Input v-model="drawer.code"
             :readonly="drawer.id != null" v-else
             placeholder="请输入机构编号(两位数字),例如 `10`, 会自动添加父级部门编号作为前缀">
        <template #prepend>
          <span>{{ drawer.parentCode }}</span>
        </template>
      </Input>
    </FormItem>

    <FormItem label="组织机构状态" label-position="top" prop="state" :error="error.state">
      <Switch size="large" v-model="drawer.state">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
      </Switch>
    </FormItem>
  </Form>

  <div class="demo-drawer-footer">
    <Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
    <Button type="primary" @click="handleForm">保存</Button>
  </div>
</template>

<script>
export default {
  props: {
    drawer: {type: Object, required: true},
  },
  data() {
    // 校验组织机构编码
    const validateOrgCode = (rule, value, callback) => {
      if (!/^\d+$/.test(value)) {
        return callback(new Error("组织机构编码必须是纯数字"));
      }
      if (this.drawer.pid != null) {
        if (value.length != 2) {
          return callback(new Error("子组织机构的编码后缀只能为2位数字"))
        }
      } else {
        if (value.length != 4) {
          return callback(new Error("根组织机构的编码为四位数字"))
        }
      }
      callback();
    };

    return {
      error: {},
      ruleValidate: {
        name: [
          {required: true, message: "组织机构名不允许为空", trigger: 'blur'},
          {type: "string", max: 100, message: "组织机构名过长", trigger: 'blur'},
        ],
        code: [
          {required: true, message: "组织机构编码不允许为空", trigger: 'blur'},
          {validator: validateOrgCode, trigger: 'blur'},
        ],
        state: [
          {type: "boolean", message: "状态必须是一个boolean类型的值", trigger: "blur"}
        ]
      },
    }
  },
  emits: ["close-win"],
  methods: {
    resetValidForm() {
      this.$refs.validForm.resetFields();
      this.error = {} ;
    },
    handleForm() {
      this.error = {} ;
      this.$refs.validForm.validate(valid => {
        if (valid) {
          if (this.drawer.id == null) {
            this.handleSave();
          } else {
            this.handleUpdate();
          }
        }
      })
    },
    handleSave() {
      let code = this.drawer.pid != null ? (this.drawer.parentCode + "" + this.drawer.code) : this.drawer.code ;
       //console.log("保存组织机构", this.drawer);
      this.$api.addOrganization({...this.drawer, code}).then(ret=> {
         if (ret.data.status) {
           this.$tips.success("保存成功");
           this.$emit("close-win", "save");
         }else{
            this.error = ret.data.error ;
         }
      });

    },
    handleUpdate() {
      let code = this.drawer.pid != null ? (this.drawer.parentCode + "" + this.drawer.code) : this.drawer.code ;
      this.$api.updateOrganization({...this.drawer, code}).then(ret=> {
        if (ret.data.status) {
          this.$tips.success("修改成功");
          this.$emit("close-win", "update");
        }else{
          this.error = ret.data.error ;
        }
      });
    }
  }
}
</script>

<style scoped>
.icon {
  vertical-align: middle;
  margin: 0 3px;;
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>